<template>
<!-- 	<img src="~@/assets/images/common/head.png" alt="头像" /> -->
  <div class="generalOperation clearfix">
     <div class="logoBg"><img src="~@/assets/images/common/fiveG.png"></div>
    <div class="heading">{{currentLvlName}}总体经营情况：<span class="redTitle">{{arriveTimeProcess}} </span></div>
<!--   <div class="generalOperationLeft">
       <div class="content" >
         <div class="contentTitle">收入完成<br><span class="contentTitleFont">{{incomeComplete.ACCTMONTH}}</span></div>
         <ul>
           <li>
             <span class="desc">累计主营收入</span>
             <span class="descNumber buleTitle">{{incomeComplete.THISYEARLJINCOME}} 亿元</span>
           </li>
           <li>
             <span class="desc">同比增长率</span>
             <span class="descNumber redTitle">{{incomeComplete.TBYEARINCREASERATE}} %</span>
           </li>
           <li>
             <span class="desc descWid">年度预算</span>
             <div  class="secondTitle"><span class="title marg">省内完成率</span><span class="descNumber buleTitle marg">{{incomeComplete.COMPLETEYEARBUDGET}} %</span></div>
             <div  class="secondTitle positionTitle"><span class="title">月累计盈缺</span><span class="descNumber buleTitle">{{incomeComplete.GAPOFBUDGETLJ}} 万元</span></div>
           </li>
           <li>
             <span class="desc descWid">收入保有率</span>
             <div  class="secondTitle"><span class="title marg">存存量</span><span class="descNumber redTitle"> %</span></div>
             <div  class="secondTitle positionTitle"><span class="title">存增量</span><span class="descNumber redTitle marg"> %</span></div>
           </li>
         </ul>
       </div>

    </div> -->
   <!-- <div class="generalOperationRight"> -->
<!--      <div class="content">
        <div class="contentTitle">用户发展<br><span class="contentTitleFont">{{incomeComplete.ACCTMONTH}}</span></div>
        <div class="rowPadd">
           <el-row :gutter="20">
            <el-col :span="5" ><div class="grid-content bg-purple">   </div></el-col>
            <el-col :span="5" :offset="5"><div class="title">累计完成</div></el-col>
            <el-col :span="8"><div class="title">完成进度</div></el-col>
            <el-col :span="6"><div class="title">一季度预算目标</div></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="5"><div class="desc">移动净增</div></el-col>
            <el-col :span="5"><div class="completion"><span class="completionNumber">{{userDev.arriveMobile.incrementNet}} 万户</span><br><span class="arriveNumber">到达{{userDev.arriveMobile.arriveValue}}万户</span></div></el-col>
            <el-col :span="8"><div class="progress-bar">
                <el-progress :percentage="userDev.arriveMobile.completeProcess" color="#8ac65a"  :text-inside="true" :stroke-width="20"></el-progress>
              </div>
            </el-col>
            <el-col :span="6"><div><span class="completionNumber">{{userDev.arriveMobile.testTarget}} 万</span></div></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="5"><div class="desc">5G新增</div></el-col>
          <el-col :span="5"><div class="completion"><span class="completionNumber">{{userDev.fiveG.arriveValue}} 万户</span><br><span class="arriveNumber">到达{{userDev.fiveG.arriveValue}}万户</span></div></el-col>
          <el-col :span="8"><div class="progress-bar">
              <el-progress :percentage="userDev.fiveG.arriveValue" color="#2cc6db"  :text-inside="true" :stroke-width="20"></el-progress>
            </div>
          </el-col>
          <el-col :span="6"><div><span class="completionNumber">{{userDev.fiveG.arriveValue}} 万</span></div></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="5"><div class="desc">宽带净增</div></el-col>
           <el-col :span="5"><div class="completion"><span class="completionNumber">{{userDev.arriveInternet.incrementNet}} 万户</span><br><span class="arriveNumber">到达{{userDev.arriveInternet.arriveValue}}万户</span></div></el-col>
           <el-col :span="8"><div class="progress-bar">
               <el-progress :percentage="userDev.arriveInternet.completeProcess" color="#fe5778"  :text-inside="true" :stroke-width="20"></el-progress>
             </div>
           </el-col>
           <el-col :span="6"><div><span class="completionNumber">{{userDev.arriveInternet.testTarget}} 万</span></div></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="5"><div class="desc">物联网净增</div></el-col>
           <el-col :span="5"><div class="completion"><span class="completionNumber">{{userDev.arriveBroadhand.incrementNet}} 万户</span><br><span class="arriveNumber">到达{{userDev.arriveBroadhand.arriveValue}}万户</span></div></el-col>
           <el-col :span="8"><div class="progress-bar">
               <el-progress :percentage="userDev.arriveBroadhand.completeProcess" color="#96e0c8"  :text-inside="true" :stroke-width="20"></el-progress>
             </div>
           </el-col>
           <el-col :span="6"><div><span class="completionNumber">{{userDev.arriveBroadhand.testTarget}}万</span></div></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24" :offset="11"><div class="redTitle">时序进度  %</div></el-col>
          </el-row>
        </div>
      </div>

    </div> -->
   <div class="content clearfix">
    <div class="generalOperationLeft">
       <div class="marBottom">
         <div class="img"><img src="~@/assets/images/common/basicBg.png"  /><span class="imgNumber">{{mainIncomeInfo.mainIncome}}<span class="unit">亿</span></span></div>
         <div class="inblock">
           <div class="inblockContent">
             <span class="title">主营收入完成</span><br>
             <span class="success">码号收入完成<span class="hint">{{mainIncomeInfo.numberIncome}}亿元</span></span>
           </div>
         </div>
       </div>
       <div  class="marBottom margin20">
         <div class="img"><img src="~@/assets/images/common/basicBg1.png"  /><span class="imgNumber">{{mainIncomeInfo.mainIncomeIncrease}}<span class="unit">%</span></span></div>
         <div class="inblock">
           <div class="inblockContent">
             <span class="title">主营收入增长</span><br>
             <span class="success">基本面收入同比增长<span class="hint">{{mainIncomeInfo.basicIncomeTbIncrease}}%</span></span>
           </div>
         </div>
       </div>
       <div  class="marBottom">
         <div class="img"><img src="~@/assets/images/common/basicBg.png"  /><span class="imgNumber">{{mainIncomeInfo.completeBudgetLj}}<span class="unit">%</span></span></div>
         <div class="inblock">
           <div class="inblockContent">
             <span class="title">累计预算完成进度</span><br>
             <span class="success"><span class="hint">{{title1}}</span>时序预算进度<span class="hint">{{mainIncomeInfo.timeProcess}}pp</span></span>
           </div>
         </div>
       </div>
        <div>
          <div class="img"><img src="~@/assets/images/common/basicBg1.png"  /><span class="imgNumber">{{mainIncomeInfo.mainIncomeMarketAmt}}<span class="unit">%</span></span></div>
          <div class="inblock">
            <div class="inblockContent">
              <span class="title">主营收入市场份额</span><br>
              <span class="success">较上年末<span class="hint">{{title2}}{{mainIncomeInfo.mainIncomeMarketTb}}pp</span></span>
            </div>
       </div>
     </div>
    </div>
    <div class="generalOperationRight">
      <div class="rightContent">
       <div class="marBottom margin15">
           <div class="img"><span class="imgNumber">{{mainDev.mobile.userIncreaseNet}}<span class="unit">万户</span></span><br><span class="success">(到达{{mainDev.mobile.userArriveNet}}万户)</span></div>
           <div class="inblock">
             <div class="inblockContent">
               <span class="title">移动净增用户</span><br>
               <span class="success">完成年度目标<span class="hint">{{mainDev.mobile.completeYearBudget}}%</span></span>
             </div>
           </div>
         </div>
         <div  class="marBottom  margin20">
           <div class="img"><span class="imgNumber">{{mainDev.fiveG.userIncreaseNet}}<span class="unit">万户</span></span><br><span class="success" v-if="mainDev.fiveG.userArriveNet>0">(到达{{mainDev.fiveG.userArriveNet}}万户)</span></div>
           <div class="inblock">
             <div class="inblockContent">
               <span class="title">5G终端用户净增（落地口径）</span><br>
               <span class="success">完成年度目标<span class="hint">{{mainDev.fiveG.completeYearBudget}}%</span></span>
             </div>
           </div>
         </div>
         <div  class="marBottom">
            <div class="img"><span class="imgNumber">{{mainDev.broadHand.userIncreaseNet}}<span class="unit">万户</span></span><br><span class="success" v-if="mainDev.broadHand.userArriveNet>0">(到达{{mainDev.broadHand.userArriveNet}}万户)</span></div>
            <div class="inblock">
              <div class="inblockContent">
                <span class="title">宽带净增用户</span><br>
                <span class="success">完成年度目标<span class="hint">{{mainDev.broadHand.completeYearBudget}}%</span></span>
              </div>
            </div>
       </div>
         <div  class="marBottom margin15">
           <div class="img"><span class="imgNumber">{{mainDev.internet.userIncreaseNet}}<span class="unit">万户</span></span><br><span class="success" v-if="mainDev.internet.userArriveNet>0">(到达{{mainDev.internet.userArriveNet}}万户)</span></div>
           <div class="inblock">
             <div class="inblockContent">
               <span class="title">物联网净增用户</span><br>
               <span class="success">完成年度目标<span class="hint">{{mainDev.internet.completeYearBudget}}%</span></span>
             </div>
           </div>
         </div>

      </div>
      <div class="rightContent rightProcess">
       <div class="marBottom margin15">
           <div class="progress"><el-progress type="circle" :percentage="!mainDev.mobile.overNetUserPortion?0:+mainDev.mobile.overNetUserPortion" :width='80' :height="80" color='#c00000'></el-progress></div>
           <div class="inblock">
             <div class="inblockContent">
               <span class="title">移动过网用户份额</span><br>
               <span class="success">较上年末<span class="hint">{{mainDev.mobile.title}}{{mainDev.mobile.thanLastYearRate}}pp</span></span>
             </div>
           </div>
         </div>
         <div  class="marBottom margin20">
           <div class="progress"><el-progress type="circle" :percentage="!mainDev.fiveG.overNetUserPortion?0:+mainDev.fiveG.overNetUserPortion" :width='80' :height="80" color='rgb(26,100,124)'></el-progress></div>
           <div class="inblock">
             <div class="inblockContent">
               <span class="title">过网用户新增份额累计</span><br>
               <span class="success">较上年末<span class="hint">{{mainDev.fiveG.title}}{{mainDev.fiveG.thanLastYearRate}}pp</span></span>
             </div>
           </div>
         </div>
         <div  class="marBottom margin15">
             <div class="progress"><el-progress type="circle" :percentage="!mainDev.broadHand.overNetUserPortion?0:+mainDev.broadHand.overNetUserPortion" :width='80' :height="80" color='rgb(26,100,124)'></el-progress></div>
              <div class="inblock">
                <div class="inblockContent">
                  <span class="title">宽带用户份额</span><br>
                  <span class="success">较上年末<span class="hint">{{mainDev.broadHand.title}}{{mainDev.broadHand.thanLastYearRate}}pp</span></span>
                </div>
           </div>
         </div>
         <div  class="marBottom ">
          <div class="progress"><el-progress type="circle" :percentage="!mainDev.internet.overNetUserPortion?0:+mainDev.internet.overNetUserPortion" :width='80' :height="80" color='#c00000'></el-progress></div>
           <div class="inblock">
             <div class="inblockContent">
               <span class="title">宽带用户新增份额累计</span><br>
               <span class="success">较上年末<span class="hint">{{mainDev.internet.title}}{{mainDev.internet.thanLastYearRate}}pp</span></span>
             </div>
           </div>
         </div>

      </div>
        <div class="cloLine"></div>
    </div>
    <div class="centerLine">
      <div class="colLine">
        <img src="~@/assets/images/common/trend.png">
        <span class="colYear">{{acctYear}}</span>
      </div>
    </div>
   </div>
  </div>
</template>

<script>
  import {getCookie} from "@/common/js/cookie"
  import { $budgetAPI } from "@/api";
    export default {
        name: "generalOperation",
        props: ["areaId", "month"],
        data(){
           return {
               number:10,
               progressNum:60,
               currentLvlName:'',
               arriveTimeProcess:'',
               acctMonth:'',
               acctYear:'',
               title:'',
               title1:'',
               title2:'',
               incomeComplete:{},
               mainIncomeInfo:{
                 title:''
               },
               userDev:{
                  arriveMobile:{},
                  fiveG:{},
                 arriveInternet: {},
                arriveBroadhand: {},
               },
                "mainDev": {
                     "broadHand": {
                       title:'',
                       completeYearBudget:'',
                       overNetUserPortion: '',
                       thanLastYearRate: '',
                       userArriveNet: '',
                       userIncreaseNet: '',
                     },
                     "mobile": {
                        title:''
                     },
                     "fiveG": {
                        title:''
                     },
                     "internet": {
                        title:''
                     }
                   },

           }
        },
        methods:{
          getTotalMarketOperationSituation(){
           var that = this
           let token = getCookie('token');

            $budgetAPI.getTotalMarketOperationSituation(
            {
              token:token,
              areaId:this.areaId,
              acctMonth:this.month
            },
            res => {
              if(res && res.code == 0 )
                that.arriveTimeProcess = res.content.arriveTimeProcess;
                that.acctYear = res.content.currentMonth.substr(0,4)+"年"+res.content.currentMonth.substr(5,6)+'月'
                that.acctMonth = res.content.currentMonth.substr(5,6)+'月'
                that.mainIncomeInfo=res.content.mainIncomeInfo;

                // that.mainIncomeInfo.timeProcess = this.getTitle(that.mainIncomeInfo.timeProcess,'超出','落后',that.mainIncomeInfo)
                // that.mainIncomeInfo.mainIncomeMarketTb = this.getTitle(that.mainIncomeInfo.mainIncomeMarketTb,'上升','下滑',that.mainIncomeInfo)
               if(that.mainIncomeInfo.timeProcess > 0){
                 that.title1='超出'

               }else if(that.mainIncomeInfo.timeProcess == ''||that.mainIncomeInfo.timeProcess == null){
                  that.mainIncomeInfo.timeProcess = ''
                   that.title1='超出'

               }else{
                 that.mainIncomeInfo.timeProcess = -that.mainIncomeInfo.timeProcess
                 that.title1='落后'
               }
               if(that.mainIncomeInfo.mainIncomeMarketTb > 0){
                 that.title2='上升'

               }else if(that.mainIncomeInfo.mainIncomeMarketTb == ''||that.mainIncomeInfo.mainIncomeMarketTb == null){
                  that.mainIncomeInfo.mainIncomeMarketTb = ''
                   that.title2='上升'

               }else{
                 that.mainIncomeInfo.mainIncomeMarketTb = -that.mainIncomeInfo.mainIncomeMarketTb
                 that.title2='下滑'
               }
                that.mainDev = res.content.mainDev;
                that.mainDev.broadHand=res.content.mainDev.broadHand;
                that.mainDev.mobile=res.content.mainDev.mobile;
                that.mainDev.fiveG=res.content.mainDev.fiveG;
                that.mainDev.internet=res.content.mainDev.internet;
                that.currentLvlName = res.content.currentLvlName;
                that.mainDev.broadHand.thanLastYearRate = this.getTitle(that.mainDev.broadHand.thanLastYearRate,'上升','下降',that.mainDev.broadHand)
                that.mainDev.mobile.thanLastYearRate = this.getTitle(that.mainDev.mobile.thanLastYearRate,'上升','下降',that.mainDev.mobile)
                that.mainDev.fiveG.thanLastYearRate = this.getTitle(that.mainDev.fiveG.thanLastYearRate,'上升','下降',that.mainDev.fiveG)
                that.mainDev.internet.thanLastYearRate = this.getTitle(that.mainDev.internet.thanLastYearRate,'上升','下降',that.mainDev.internet)
            },
             err => {}
             )
          },
          getTitle(val,up,down,obj){
            if(val > 0){
               obj.title=up
            }else if(val == ''||val == null){
               val = ''
               obj.title=up
            }else{
              val = -val
              obj.title=down
            }
             return val
          },

        },
    }
</script>

<style  lang="scss" scoped>
 .generalOperation{
   page-break-inside:avoid;
   padding: 20px;
   border:1px solid #dee5f3;
   border-radius:5px;
   position: relative;

   .generalOperation.clearfix:after,.generalOperation.clearfix:before{
     content: "";
     display: table;
   }
   .generalOperation.clearfix:after{
     clear: both;
   }
   .logoBg{
     position: absolute;
     right:20px;
     top:20px;
   }
   .generalOperation.clearfix{
     *zoom: 1;
   }
   .heading{
     font-size:22px;
     font-weight: 700;
     text-align: center;
     padding-bottom: 40px;
     .redTitle{
       color:#c00000
     }
   }
   .content{
     position:relative;
     .content.clearfix:after,.content.clearfix:before{
       content: "";
       display: table;
     }
     .content.clearfix:after{
       clear: both;
     }
   .generalOperationLeft{
      width:32%;
      display: block;
      position: relative;
      float:left;

      .marBottom{
        margin-bottom: 15px;
        }
        .margin20{
          margin-bottom: 40PX;
        }

      .img{
        position: relative;
        display: inline-block;
        .imgNumber{
          position: absolute;
          width: 100%;
          top:50%;
          left:0;
          text-align: center;
          transform: translateY(-50%);
          font-size: 26px;
          font-weight: 700;
          color:white;
          .unit{
             font-size: 16px;
          }
        }
      }

      .inblock{
        display: inline-block;
        margin-left: 10px;
        // position: relative;
        // top:-5px;
        .inblockContent{
          display: table-cell;
          vertical-align: middle;
          padding-left: 15px;
          border-left:1px solid #C0C4CC;
          height: 80px;
          position: relative;
          top:-7px;
        .title{
          display: inline-block;
          font-size: 18px;
          font-weight: 700;
        }
        .success{
          display: inline-block;
          margin-top: 15px;
          font-size: 12px;
          font-weight: normal;
          .hint{
            color:#c00000;
          }
        }
       }
      }
   }

   .generalOperationRight{
     width:60%;
     float: right;
     position: relative;
     top:10px;
     .cloLine{
            position: absolute;
            top:45%;
            width:100%;
            height:2px;
            background: linear-gradient(
            to right,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,0) 10%,
            rgba(150,193,234,0.3) 20%,
            rgba(150,193,234,0.4) 30%,
            rgba(150,193,234,0.5) 40%,
            rgba(150,193,234,0.8) 50%,
            rgba(150,193,234,0.5) 60%,
            rgba(150,193,234,0.4) 70%,
            rgba(150,193,234,0.3) 80%,
            rgba(0,0,0,0) 90%,
            rgba(0,0,0,0) 100%);

        }
     .rightContent{
        width: 55%;
        display: inline-block;
     }
     .rightProcess{
         width: 45%;
         float: right;
         .marBottom{
           position: relative;
           top: -10px;
         }
     }

     .marBottom{

       height: 100px;
       position: relative;
       }
       .margin20{
         margin-bottom: 40PX;
       }
       .margin15{ margin-bottom: 15px;}
       .rightProcess{
         .inblock{
           margin-left: 90px;
         }
         .progress{
           display: inline-block;
           position: absolute;

           }
       }

     .img{
       display: inline-block;
         text-align: center;
         height: 80px;
          position: absolute;
            top: 50%;
            transform: translateY(-50%);
       .imgNumber{
         font-size: 26px;
         font-weight: 700;
         width: 120px;
         display: inline-block;
         color:rgb(26,100,124);
         .unit{
            font-size: 16px;
         }

       }
       .success{
         display: inline-block;
         margin-top: 15px;
         font-size: 12px;
         font-weight: normal;
       }
     }
     .inblock{
       display: inline-block;
       margin-left: 10px;
       margin-left: 120px;
       .inblockContent{
         // display: table-cell;
         vertical-align: middle;
         padding-left: 15px;
         border-left:1px solid #C0C4CC;
         height: 80px;

         padding-top: 10px;
       .title{
         display: inline-block;
         font-size: 18px;
         font-weight: 700;
       }
       .success{
         display: inline-block;
         margin-top: 15px;
         font-size: 12px;
         font-weight: normal;
         .hint{
           color:#c00000;
         }
       }
      }
     }
   }
   .centerLine{
     width:8%;
     position:absolute;
     height:100%;
     left:32%;
     &:before{
           content:'';
           position: absolute;
           top:0%;
           left:calc(50% - 1px);
           width:2px;
           height:calc(50% - 45px);
           background: linear-gradient(
           to bottom,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) 10%,
           rgba(150,193,234,0.2) 20%,
           rgba(150,193,234,0.3) 30%,
           rgba(150,193,234,0.4) 40%,
           rgba(150,193,234,0.5) 50%,
           rgba(150,193,234,0.6) 60%,
           rgba(150,193,234,0.7) 70%,
           rgba(150,193,234,0.8) 80%,
           rgba(150,193,234,0.9) 90%,
           rgba(150,193,234,1) 100%
           )

     }
     &:after{
           content:'';
           position: absolute;
           bottom:0%;
           left:calc(50% - 1px);
           width:2px;
           height:calc(50% - 45px);
           background: linear-gradient(
           to bottom,
           rgba(150,193,234,1) 0%
           rgba(150,193,234,0.9) 10%,
           rgba(150,193,234,0.8) 20%,
           rgba(150,193,234,0.7) 30%,
           rgba(150,193,234,0.6) 40%,
           rgba(150,193,234,0.5) 50%,
           rgba(150,193,234,0.4) 60%,
           rgba(150,193,234,0.3) 70%,
           rgba(150,193,234,0.2) 80%,
           rgba(150,193,234,0.1) 90%
           rgba(0,0,0,0) 0%,

           )

     }
     .colLine{
        position: absolute;
        left: calc(50% - 45px);
        top: 50%;
        width: 90px;
        height: 90px;
        border:2px solid #c00000;
        border-radius: 100%;
        transform:translateY(-50%);
        img{
          width: 40px;
          margin-top: 17px;
          margin-left: 20px;
          }
          .colYear{
            color:#c00000;
            font-size: 10px;
            margin-left: 13px;
            display: block;
          }
       }
   }
  }
   // .generalOperationLeft{
   //   width: 38%;
   //   float: left;
   //   margin-top: 20px;
   //   .content{
   //     border:1px solid #e5e5e5;
   //     position: relative;
   //     border-radius: 10px;
   //     padding: 20px;
   //     &:before{
   //       content:"";
   //       position:absolute;
   //       left:25%;
   //       top:-2px;
   //       width:50%;
   //       height:2px;
   //       background-color:#fff
   //     }
   //     .contentTitle{
   //       position: absolute;
   //       left: 50%;
   //       top: -14px;
   //       transform: translateX(-50%);
   //       font-size: 18px;
   //       font-weight: 700;
   //       text-align: center;
   //       .contentTitleFont{
   //         font-size: 15px;
   //         font-weight: 700;
   //       }
   //     }
   //     ul{
   //       padding-top: 70px;
   //       li{
   //         position: relative;
   //         height: 60px;
   //         line-height: 60px;
   //         .desc{
   //           font-size: 18px;
   //           font-weight: 700;

   //         }
   //         .desc.descWid{
   //           position: absolute;
   //           top: 50%;
   //           transform: translateY(-50%);
   //         }
   //         .descNumber.redTitle{
   //           font-size: 18px;
   //           font-weight: 700;
   //           color:#c00000;
   //           float: right;
   //         }
   //         .descNumber.buleTitle{
   //           font-size: 18px;
   //           font-weight: 700;
   //           color:#5585bf;
   //           float: right;
   //         }
   //         .secondTitle{
   //           padding-left: 120px;
   //           font-size: 15px;
   //           height: 30px;
   //           line-height: 30px;
   //           .title{
   //             display: inline-block;
   //             font-size: 15px;
   //           }

   //           .title.marg{
   //             margin-bottom: 10px;
   //           }
   //         }
   //       }
   //       li:nth-child(3){
   //         margin: 10px 0;
   //       }
   //       li:nth-child(4){
   //         margin: 10px 0;
   //       }
   //     }
   //   }

   // }
   // .generalOperationRight{
   //   width:60%;
   //   float: right;
   //   margin-top: 20px;
   //   .content{
   //     border:1px solid #e5e5e5;
   //     position: relative;
   //     border-radius: 10px;
   //     padding: 20px;
   //     &:before{
   //       content:"";
   //       position:absolute;
   //       left:25%;
   //       top:-2px;
   //       width:50%;
   //       height:2px;
   //       background-color:#fff
   //     }
   //     .contentTitle{
   //       position: absolute;
   //       left: 50%;
   //       top: -14px;
   //       transform: translateX(-50%);
   //       font-size: 18px;
   //       font-weight: 700;
   //       text-align: center;
   //       .contentTitleFont{
   //         font-size: 15px;
   //         font-weight: 700;
   //       }
   //     }
   //     .rowPadd{
   //       padding-top: 30px;
   //       .el-row{
   //         height:60px;
   //         line-height: 60px;
   //         .el-col{
   //           text-align: center;
   //           .progress-bar{
   //             width: 80%;
   //             display: inline-block;
   //             /deep/ .el-progress-bar__innerText{
   //               color:#000;
   //             }
   //           }
   //           .title{
   //             color:#5197ea;
   //             font-size: 18px;
   //             text-align: center;
   //           }
   //           .desc{
   //             font-size: 18px;
   //             font-weight: 700;
   //           }
   //           .completion{
   //             height: 30px;
   //             line-height: 30px;

   //           .completionNumber{
   //             font-size: 18px;
   //             font-weight: 700;
   //             color:#5585bf;
   //            }
   //           .arriveNumber{
   //             font-size: 15px;
   //            }
   //            }
   //            .completionNumber{
   //             font-size: 18px;
   //             font-weight: 700;
   //             color:#5585bf;
   //            }
   //         }
   //       }
   //       .el-row:nth-child(1){
   //         line-height: 40px;
   //         height: 40px;
   //       }
   //       .el-row:nth-child(6){
   //         line-height: 30px;
   //         height: 30px;
   //         .el-col{
   //           text-align: left;
   //           .redTitle{
   //             color:#c00000;
   //             font-size: 15px;
   //             position: absolute;
   //             // left: 46.6%;
   //           }
   //         }

   //       }
   //     }

   //   }
   // }
 }
</style>
